﻿@model QuanLyGiaoVuUI.Models.GiangVien.CapNhatGiangVienViewModel
@using QuanLyGiaoVuUI.Helpers;
@{
    ViewBag.Title = "ThemGiangVien";
    Layout = "~/Views/Shared/_blueWhaleLayout.cshtml";
}

<style>
    .btnXoaChucVu {
        cursor: pointer;
    }

    .hidden {
        display: none;
    }
</style>

@{Html.RenderPartial("GiangVienMenuPartial");}

<div id="main" class="grid_10">
    <!--  start page-heading -->

    <div id="page-heading" class="box round first grid">
        @if (Model.ID.Equals(Guid.Empty))
        {
            <h2>Thêm giảng viên mới</h2>
        }
        else
        {
            <h2>Cập nhật thông tin giảng viên</h2>
        }

        <div id="content-table-inner" class="block">
            <!-- start id-form -->
            @{Html.EnableClientValidation();}
            @using (Html.BeginForm("CapNhat", "GiangVien", new AjaxOptions { HttpMethod = "POST" }))
            {
                @Html.ValidationSummary(true)
                @Html.HiddenFor(model => model.ID)
                <div id="tabs">
                    <ul>
                        <li><a href="#tab-chung"><span>Chung</span></a></li>
                        @{if (!Model.ID.Equals(Guid.Empty))
                          {
                            <li><a href="#tab-monhoc"><span>Giảng dạy</span></a></li>
                          }
                        }
                    </ul>
                    <div id="tab-chung" style="overflow: hidden;">
                        <div style="width: 45%; float: left; position: relative;">
                            <table border="0" cellpadding="0" cellspacing="0" id="id-form" class="form">
                                <tr>
                                    <th valign="top" class="formLabel">@Html.LabelFor(model => model.MaGiangVien)</th>
                                    <td>@Html.TextBoxFor(model => model.MaGiangVien)</td>
                                    <td>@Html.MyValidationMessageFor(model => model.MaGiangVien)</td>
                                </tr>
                                <tr>
                                    <th valign="top" class="formLabel">@Html.LabelFor(model => model.HoTenGV)</th>
                                    <td>@Html.TextBoxFor(model => model.HoTenGV)</td>
                                    <td>@Html.MyValidationMessageFor(model => model.HoTenGV)</td>
                                </tr>
                                <tr>
                                    <th valign="top" class="formLabel">@Html.LabelFor(model => model.GioiTinh)</th>
                                    <td>
                                        <select class="styledselect_form_1" name="GioiTinh">
                                            @if (Model.GioiTinh == 1)
                                            {
                                                <option value="1" selected="selected">Nam</option>
                                                <option value="0">Nữ</option>
                                            }
                                            else
                                            {
                                                <option value="1">Nam</option>
                                                <option value="0" selected="selected">Nữ</option>
                                            }
                                        </select>
                                    </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <th valign="top" class="formLabel">@Html.LabelFor(model => model.NgaySinh)</th>
                                    <td>@Html.TextBox("NgaySinh", Model.ID.Equals(Guid.Empty) ? "" : (Model.NgaySinh.HasValue ? ((DateTime)Model.NgaySinh).ToShortDateString() : String.Empty), new { @class = "inp-form date_picker" })</td>
                                    <td>@Html.MyValidationMessageFor(model => model.NgaySinh)</td>
                                </tr>
                            </table>
                        </div>

                        <div id="tab-lienlac"  style="width: 45%; float: left; position: relative;">
                            <table border="0" cellpadding="0" cellspacing="0" id="id-form" class="form">
                                <tr>
                                    <th valign="top" class="formLabel">@Html.LabelFor(model => model.SoDienThoai)</th>
                                    <td>@Html.TextBoxFor(model => model.SoDienThoai, new { @class = "inp-form" })</td>
                                    <td>@Html.MyValidationMessageFor(model => model.SoDienThoai)</td>
                                </tr>
                                <tr>
                                    <th valign="top" class="formLabel">@Html.LabelFor(model => model.DiaChi)</th>
                                    <td>@Html.TextBoxFor(model => model.DiaChi, new { @class = "inp-form" })</td>
                                    <td>@Html.MyValidationMessageFor(model => model.DiaChi)</td>
                                </tr>
                                <tr>
                                    <th valign="top" class="formLabel">@Html.LabelFor(model => model.Email)</th>
                                    <td>@Html.TextBoxFor(model => model.Email, new { @class = "inp-form" })</td>
                                    <td>@Html.MyValidationMessageFor(model => model.Email)</td>
                                </tr>
                                <tr>
                                    <th>&nbsp;</th>
                                    <td valign="top"></td>
                                    <td></td>
                                </tr>
                            </table>
                        </div>

                        <div id="tab-congtac" style="float: left; position: relative; clear: both;">
                            <table border="0" cellpadding="0" cellspacing="0" id="id-form" class="form">
                                <tr>
                                    <th valign="top" class="formLabel">@Html.LabelFor(model => model.NgayVaoCongTac)</th>
                                    <td>@Html.TextBox("NgayVaoCongTac", Model.ID.Equals(Guid.Empty) ? "" : Model.NgayVaoCongTac.ToShortDateString(), new { @class = "inp-form date_picker" })</td>
                                    <td>@Html.MyValidationMessageFor(model => model.NgayVaoCongTac)</td>
                                </tr>
                                <tr>
                                    <th valign="top" class="formLabel">@Html.LabelFor(model => model.MaHocVi)</th>
                                    <td>@Html.DropDownList("MaHocVi", new SelectList(Model.DanhSachHocVi, "MaHocVi", "TenHocVi"), new { @class = "styledselect_form_1" })</td>
                                </tr>
                                <tr>
                                    <th valign="top" class="formLabel">@Html.LabelFor(model => model.MaHocHam)</th>
                                    <td>@Html.DropDownList("MaHocHam", new SelectList(Model.DanhSachHocHam, "MaHocHam", "TenHocHam"), new { @class = "styledselect_form_1" })</td>
                                </tr>
                                <tr>
                                    <th valign="top" class="formLabel">@Html.LabelFor(model => model.MaChucDanh)</th>
                                    <td>@Html.DropDownList("MaChucDanh", new SelectList(Model.DanhSachChucDanh, "MaChucDanh", "TenChucDanh"), new { @class = "styledselect_form_1" })</td>
                                </tr>
                                <tr>
                                    <th valign="top" class="formLabel">@Html.LabelFor(model => model.ThinhGiang)</th>
                                    <td>@Html.CheckBoxFor(m => m.ThinhGiang)</td>
                                </tr>
                                @if (Model.ID != Guid.Empty)
                                {
                                    <tr>
                                        <th valign="top" class="formLabel">Chức vụ kiêm nhiệm</th>
                                        <td>
                                            @{if (Model.DanhSachChucVuKiemNhiem.Count() > 0)
                                              {
                                                <ul id="dsChucVu">
                                                    @foreach (var chucVu in Model.DanhSachChucVuKiemNhiem)
                                                    { 
                                                        <li><span>@chucVu.TenChucVu</span><a data-id='@chucVu.MaChucVu' title='Xóa chức vụ kiêm nhiệm' class='btnXoaChucVu'> (X)</a></li>
                                                    }
                                                </ul>
                                              }
                                              else
                                              {
                                                <ul id="dsChucVu"></ul>
                                                <span id="KhongCoChucVu">Không có.</span>
                                              }
                                            }
                                            @{if (Model.DanhSachChucVu.Count() > 0)
                                              {
                                                <div id="divThemChucVu">
                                                    @Html.DropDownList("MaChucVu", new SelectList(Model.DanhSachChucVu, "MaChucVu", "TenChucVu"))
                                                    <a href="javascript:;" onclick="ThemChucVu()">Thêm</a>
                                                </div>
                                              }
                                            }
                                        </td>
                                    </tr>
                                }
                            </table>
                            <input type="submit" value="Lưu thông tin" id="submit-form" />
                        </div>
                    </div>
                    


                    @{if (!(Model.ID.Equals(Guid.Empty)))
                      {
                        <div id="tab-monhoc">
                            <div id="chon-bomon">
                                <table class="form">
                                    <tr>
                                        <th class="formLabel">
                                            @Html.LabelFor(m => m.MaBoMon)
                                        </th>
                                        <td>
                                            @Html.DropDownListFor(m => m.MaBoMon, new SelectList(Model.DanhSachBoMon, "MaBoMon", "TenBoMon"))
                                            <input type="button" value="Chọn bộ môn" id="btnChonBoMon" />
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div id="table-monhoc-content">
                                <table class="data display datatable">
                                        <tr>
                                            <th class="sorting table-header-check"><a id="toggle-all"></a></th>
                                            <th class="sorting line-left minwidth-1"><a href="javavscript:;">Mã môn học</a></th>
                                            <th class="sorting line-left"><a href="javavscript:;">Tên môn học</a></th>
                                            <th class="sorting line-left"><a href="javavscript:;">Tổng số tín chỉ</a></th>
                                            <th class="sorting line-left"><a href="javavscript:;">Số tín chỉ lý thuyết</a></th>
                                        </tr>
                                @{if (Model.DanhSachMonHocGiangDay.Count() > 0)
                                  {
                                        int count = 0;
                                        foreach (var monhoc in Model.DanhSachMonHocGiangDay)
                                        {
                                            <tr class="gradeA @(++count % 2 == 0 ? "even" : "odd")">
                                                <td>
                                                    <input class="monHocId" type="checkbox" name="selectedIds" value="@monhoc.ID"/>
                                                </td>
                                                <td>@monhoc.MaMonHoc</td>
                                                <td>@monhoc.TenMonHoc</td>
                                                <td style="text-align: center">@monhoc.TongSoTinChi</td>
                                                <td style="text-align: center">@monhoc.SoTinChiLyThuyet</td>
                                                @*<td>@monhoc.HocKy</td>*@
                                                @*<td>@(monhoc.MaMonChinh != null ? monhoc.MonHocChinh.MaVaTenMonHoc : "Không có")</td>*@
                                            </tr>
                                        }
                                  }
                                  else
                                  {
                                    <tr class="gradeA odd">
                                        <td colspan="5">Giảng viên chưa đảm nhận môn nào.</td>
                                    </tr>
                                  }
                                }
                                    </table>
                            </div>
                            <div style="overflow: hidden">
                                <a href="javascript:;" class="" id="btnThemMon">Thêm môn</a>
                                <a href="javascript:;" class="" id="btnXoaMon">Xóa môn</a>
                            </div>
                        </div>
                      }
                    }

                </div>       
            }
            <!-- end id-form  -->

            <div class="clear"></div>
        </div>
        <!--  end content-table-inner  -->
    </div>

    <div id="themmon-dialog"></div>

    <script>
        $(document).ready(function () {
            $("#btnThemMon").button().bind("click", ThemMon);
            $("#btnXoaMon").button().bind("click", function () {
                var selectedIds = '';
                $(".monHocId").each(function () {
                    if ($(this).is(":checked"))
                        selectedIds += $(this).val() + ",";
                });
                selectedIds = selectedIds.substr(0, selectedIds.length - 1);

                if (selectedIds.length == 0)
                    ToastManager.showStickyWarningToast("Chưa chọn môn học muốn xóa.");
                else {
                    if (confirm("Xóa các môn học đã chọn?")) {
                        var giangVienId = $("#ID").val();
                        $.ajax({
                            type: "post",
                            url: "/GiangVien/XoaMon",
                            data: {
                                giangVienId: giangVienId,
                                selectedIds: selectedIds
                            },
                            success: function (data) {
                                if (data.success) {
                                    ToastManager.showSuccessToast("Cập nhật thành công.");
                                    $(".monHocId").each(function () {
                                        if ($(this).is(":checked"))
                                            $(this).closest("tr").remove();
                                    });
                                }
                                else {
                                    ToastManager.showStickyWarningToast(data.message);
                                }
                            }
                        });
                    }
                }
            });

            $("#btnChonBoMon").button().bind("click", function () {
                $.ajax({
                    url: "/GiangVien/ChonBoMon",
                    type: "post",
                    data: {
                        maGiangVien: $("#ID").val(),
                        maBoMon: $("#MaBoMon").val()
                    },
                    success: function (data) {
                        if (data.success) {
                            ToastManager.showSuccessToast("Cập nhật thành công.");
                            $("#table-monhoc-content").find(".gradeA").remove();
                            var tbody = $("#table-monhoc-content").find("table").find("tbody");
                            var isEven = tbody.find("tr").last().hasClass("even");
                            for (var index = 0; index < data.dataList.length; index++) {
                                var monHoc = data.dataList[index];
                                var rowType = isEven ? "even" : "odd";
                                isEven = !isEven;
                                var tr = "<tr class='gradeA " + rowType + "'>";
                                tr += "<td><input class='monHocId' type='checkbox' value='" + monHoc.ID + "' name='selectedIds'></td>";
                                tr += ("<td>" + monHoc.MaMonHoc + "</td>");
                                tr += ("<td>" + monHoc.TenMonHoc + "</td>");
                                tr += ("<td style='text-align: center'>" + monHoc.TongSoTinChi + "</td>");
                                tr += ("<td style='text-align: center'>" + monHoc.SoTinChiLyThuyet + "</td>");
                                tr += "</tr>";
                                tbody.append(tr);
                            }
                        }
                        else {
                            ToastManager.showStickyWarningToast(data.message);
                        }
                    }

                });
            });
        });

        function ThemMon() {
            $.ajax({
                url: "/GiangVien/SoMonHocChuaDamNhan",
                data: {
                    giangVienId: '@(Model.ID)'
                },
                success: function (data) {
                    if (data > 0) {
                        DialogThemMon();
                    }
                    else {
                        ToastManager.showStickyWarningToast("Giảng viên này đã đảm nhận tất cả các môn.");
                    }
                }
            })
        }

        function DialogThemMon() {
            var url = '/GiangVien/ThemMonHoc/@(Model.ID)';
            $("#themmon-dialog").load(url);
            $("#themmon-dialog").dialog({
                autoOpen: false,
                modal: true,
                width: 600,
                height: "auto",
                buttons: {
                    "Thêm môn": function () {
                        $("#submit-mhgv-btn").click();
                        $(this).dialog("close");
                    }
                }
            });
            $("#themmon-dialog").dialog("open");
        }

        function ThemMonDamNhan(data) {
            if (data.success)
            {
                var tbody = $("#table-monhoc-content").find("table").find("tbody");
                var isEven = tbody.find("tr").last().hasClass("even");
                for (var index = 0; index < data.dataList.length; index++)
                {
                    var monHoc = data.dataList[index];
                    var rowType = isEven ? "even" : "odd";
                    isEven = !isEven;
                    var tr = "<tr class='gradeA " + rowType + "'>";
                    tr += "<td><input class='monHocId' type='checkbox' value='" + monHoc.ID + "' name='selectedIds'></td>";
                    tr += ("<td>" + monHoc.MaMonHoc + "</td>");
                    tr += ("<td>"+ monHoc.TenMonHoc +"</td>");
                    tr += ("<td style='text-align: center'>" + monHoc.TongSoTinChi + "</td>");
                    tr += ("<td style='text-align: center'>" + monHoc.SoTinChiLyThuyet + "</td>");
                    tr += "</tr>";
                    tbody.append(tr);
                }
                ToastManager.showSuccessToast("Cập nhật thành công.");
            }
        }

    function ThemChucVu() {
        var dsChucVu = document.getElementById("MaChucVu");
        var maChucVu = dsChucVu.options[dsChucVu.selectedIndex].value;
        var count = dsChucVu.options.length;
        if (maChucVu == '@Guid.Empty')
            return;
        $.ajax({
            type: "POST",
            url: "/GiangVien/ThemChucVu",
            data: {
                giangVienId: '@(Model.ID)',
                chucVuId: maChucVu
            },
            success: function (data) {
                if (data.success == true) {
                    $("#KhongCoChucVu").html("");
                    $("#dsChucVu").append("<li><span>" + data.tenChucVu + "</span><a data-id='" + maChucVu + "' title='Xóa chức vụ kiêm nhiệm' class='btnXoaChucVu'> (X)</a>" + "</li>");
                    dsChucVu.remove(dsChucVu.selectedIndex);
                    if (count - 1 <= 0) {
                        $("#divThemChucVu").addClass("hidden");
                    }
                    ToastManager.showSuccessToast("Thêm chức vụ " + data.tenChucVu + " thành công.");
                    BindDeleteChucVuButtonAction();
                }
                else {
                    ToastManager.showStickyWarningToast(data.message);
                }
            }
        });
    }

    $(document).ready(function () {
        $("#tabs").tabs();
        $("#submit-form").button();
        $(".date_picker").datepicker();
        BindDeleteChucVuButtonAction();
    });

    function BindDeleteChucVuButtonAction() {
        var dsChucVu = document.getElementById("MaChucVu");
        var count = dsChucVu.options.length;
        $(".btnXoaChucVu").unbind("click").bind("click", function () {
            var holder = $(this).parent();
            var maCV = $(this).data("id");
            var tenChucVu = holder.find("span").first().html();
            $.ajax({
                type: "POST",
                url: "/GiangVien/XoaChucVu",
                data: {
                    giangVienId: '@(Model.ID)',
                                chucVuId: maCV
                            },
                            success: function (data) {
                                if (data.success) {
                                    holder.remove();
                                    $("#MaChucVu").append("<option value='" + maCV + "'>" + tenChucVu + "</option>");
                                    if ((count + 1) > 0)
                                    {
                                        if ($("#divThemChucVu").hasClass("hidden"))
                                            $("#divThemChucVu").removeClass("hidden");
                                    }
                                }
                                else
                                    ToastManager.showStickyWarningToast(data.message);
                            }
                        });
        });
    }
    </script>
